import React from 'react';
import YellowTitle from '../yellowTitle/YellowTitle';
import CommentsInput from '../commentsInput/CommentsInput';

class Comments extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Comments';
        this.state = {
            datas : props.data
                // {
                //     id: 0,
                //     name: "顾晨阳",
                //     imgSrc: "",
                //     praise: 2,
                //     time: "2016年8月1日",
                //     comment: " 这场比赛，精彩！！ 期待已久，果然没有让大家失望，加油东北第一",
                //     commentsAdd: [
                //         {

                //             id: 0,
                //             name: "齐大胜",
                //             comment: " 精彩"
                //         },
                //         {
                //             id: 1,
                //             name: "张大春",
                //             comment: " 有点遗憾，希望下次能赢！"
                //             parent: 0
                //         },
                //     ]
                // },

        }
    }

    // 没有传给后端
    handlePraise(e) {
        e.preventDefault();
        let flag = e.target.className.indexOf('active')== -1?false:true;
        let praiseNum = parseInt(e.target.getAttribute("data-num"));
        console.log(flag);
        console.log("*****************");

        let nextFlag = !flag;
        if( nextFlag ) {
            let nextPraiseNum = praiseNum+1;
            e.target.innerHTML = `${nextPraiseNum}&nbsp;&#xe609;`;
            e.target.className = 'iconfont active right';
            e.target.setAttribute("data-num",nextPraiseNum);
        } else {
            let nextPraiseNum = praiseNum-1;
            e.target.innerHTML = `${nextPraiseNum}&nbsp;&#xe607;`;
            e.target.className = 'iconfont right';
            e.target.setAttribute("data-num",nextPraiseNum);
        }
    }

    onClickShowName (e) {
        e.preventDefault();
        let allDatas = this.state.datas;
        //  取到点击的 名字span ( mian comment 中 )／名字的 li ( comment 中 )
        let targetNode = e.currentTarget;
        let commentsInput = $("#commentsInput:eq(0)");

        console.log(e.target );
        console.log(e.currentTarget );
        // input 中要显示的名字
        let name_show = '';
        if( targetNode.getAttribute('data-main-comment-id') ) {
            // 说明是 main comments 里的
            console.log(`I'm in main comments ${targetNode.getAttribute('data-main-comment-id')}`);
            if(commentsInput.attr("data-my-id")) {
                commentsInput.removeAttr('data-my-id');
            }

            name_show = targetNode.innerHTML;
            commentsInput.attr("data-parent-id", targetNode.getAttribute('data-main-comment-id' ));


        } else if(targetNode.getAttribute("data-comment-id" )) {
        // 说明是 add comments 里的
            let myId = targetNode.getAttribute( "data-comment-id" );
        // 在父节点处 拿到 在 哪个 main comments 里
            if( targetNode.parentNode.getAttribute('data-main-comment-id' ) ){
                let parentid = targetNode.parentNode.getAttribute('data-main-comment-id' );
                // 在state 数据中 拿到点击的评论的名字
                name_show = allDatas[parentid].commentsAdd[myId].name;
                console.log( `parentid : ${parentid}` );
                console.log( `myId : ${myId}` );
                commentsInput.attr({"data-parent-id" : parentid, "data-my-id" : myId} );
            } else {
                console.log(`Bad  parent` );
            }
        }

        //  把名字name_show 传给 commentInput 组件，或者 js 自动在 input 传值
        commentsInput.val( `${name_show} : ` );
    }

    componentWillMount() {
        console.log("compoent WIll mount -----comments");
        this.setState({
            datas: this.props.data
        })
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            datas: nextProps.data,
        })
    }

    render() {
        console.log( 'comments  render --------' );
        let commentsList = this.state.datas.map(function( data, index ){

            let addCommentsList = data.commentsAdd.map( function( addComment, index ) {
                console.log( 'addCommentsList' );
                console.log( `${index}: ${addComment.name}` );

                if(addComment.parent){
                    let parentName = data.commentsAdd[parseInt( addComment.parent ) ].name ;
                    return (
                        <li key={index} data-comment-id = {index} onClick= {this.onClickShowName.bind(this)}  ><strong> {addComment.name}</strong> <span> 回复 </span> {parentName} : <span>  {addComment.comment}</span></li>
                    )
                } else {
                    return (
                        <li key={index} data-comment-id = {index} onClick= {this.onClickShowName.bind(this)} > <strong>{addComment.name} </strong>：<span>  {addComment.comment}</span></li>
                    )
                }
            }.bind(this));

            let addCommentBox = function(){
                return (
                    <div className="addComments">
                        <ul className="addList" data-main-comment-id= {index} >
                            {addCommentsList}
                        </ul>
                        <a >查看全部57条评论</a>
                    </div>
                )
            }

                     /*如果addCommentsList 是 0 的话，则 下面的 display: none;*/
            return (
                <li key={index}>
                    <img src={data.imgSrc} />
                    <div>
                        <p className="mainAuthor">
                            <span className='iconfont right' onClick={this.handlePraise.bind(this)} data-num={data.praise}> {data.praise}&nbsp;&#xe607;</span>
                            <span onClick={this.onClickShowName.bind(this)} data-main-comment-id= {index}>{data.name}</span>
                        </p>
                        <p className="comments">
                            {data.comment}
                            <span className="time"> {data.time}</span>
                        </p>
                        <div className="addComments" style={0 == data.commentsAdd.length ? {display: "none"}: {display: "block"}    }  >
                            <ul className="addList" data-main-comment-id= {index} >
                                {addCommentsList}
                            </ul>
                            <a >查看全部57条评论</a>
                        </div>
                    </div>
                </li>
            )
        }.bind(this));

        return (
            <div className="comments" >
                <YellowTitle title="评论" />
                <ul className="commentsList">
                    {commentsList}
                </ul>
            </div>
        );
    }
}

export default Comments;
